<script setup lang="ts">
import { onMounted, ref, watch, nextTick } from "vue";
import { useRouter, useRoute } from 'vue-router';
import axios from "axios";
import { NavBar } from 'vant';

// 定义视频数据接口
interface CommentItem {
  user: string;
  avatar: string;
  content: string;
  date: string;
  likes?: number;
  isLiked?: boolean;
}

interface VideoItem {
  id: number | string;
  name: string;
  img: string;
  state: number;
  tx?: string;
  user?: string;
  gz?: string;
  videoUrl?: string;
  sj?: number | string;   // 时长
  qk?: string;            // 千卡
  time?: string;          // 日期
  type?: string;          // 运动类型
  comments?: CommentItem[];
  liked?: boolean;
  likeCount?: number;
  description?: string;   // 视频描述
  tags?: string[];        // 标签
  difficulty?: string;    // 难度等级
  equipment?: string[];   // 所需器材
}

const router = useRouter();
const route = useRoute();
const videoData = ref<VideoItem | null>(null);
const loading = ref(true);
const newComment = ref('');
const showShare = ref(false);

// 相关推荐数据
const relatedVideos = ref<VideoItem[]>([]);

// AI聊天相关状态
const showAIChat = ref(false);
const chatMessages = ref<ChatMessage[]>([]);
const currentMessage = ref("");
const isLoading = ref(false);
const chatContainer = ref<HTMLElement>();

interface ChatMessage {
  id: string;
  content: string;
  isUser: boolean;
  timestamp: Date;
}

// 获取相关推荐视频
const getRelatedVideos = async (type: string, currentId: string) => {
  try {
    const response = await axios.get(`http://localhost:3000/api/video-list?type=${type}`);
    const sameTypeVideos = response.data;
    relatedVideos.value = sameTypeVideos
      .filter((video: VideoItem) => String(video.id) !== String(currentId))
      .slice(0, 3);
  } catch (error) {
    console.error('获取相关推荐失败:', error);
  }
};

const onClickLeft = () => {
  // 返回时不带tab参数
  router.push({ name: 'Video' });
};

// 关注/取消关注功能 - 在模板中使用
const toggleFollow = async () => {
  if (!videoData.value) return;
  
  try {
    // 由于没有后端API，这里只更新本地状态
    const nextGz = videoData.value.gz === "1" ? "0" : "1";
    videoData.value.gz = nextGz;
    console.log('关注状态已更新:', nextGz === "1" ? "已关注" : "未关注");
  } catch (error) {
    console.error('关注操作失败:', error);
  }
};

// 从后端API获取视频信息
const getVideoDataById = async () => {
  try {
    loading.value = true;
    const id = route.params.id;
    
    // 从后端API获取视频数据
    const response = await axios.get('http://localhost:3000/api/video-list');
    const list = response.data;
    const video = list.find((item: any) => String(item.id) === String(id));
    
    if (video) {
      videoData.value = video as VideoItem;
      
      // 根据运动类型补充描述和标签
      const type = videoData.value.type || '';
      const descriptions: Record<string, string> = {
        '跑步': '这是一套专业的跑步训练视频，适合各个水平的跑步爱好者。通过科学的训练方法，帮助你提升跑步技巧和体能水平。',
        '骑行': '这是一套专业的骑行训练视频，包含技巧教学和安全指导。适合想要提升骑行技能的朋友。',
        '瑜伽': '这是一套专业的瑜伽练习视频，帮助放松身心，提升身体柔韧性。适合各个水平的练习者。',
        '健身': '这是一套专业的健身训练视频，通过科学的动作设计，帮助你塑造完美身材。'
      };
      
      const tags: Record<string, string[]> = {
        '跑步': ['跑步', '燃脂', '有氧运动'],
        '骑行': ['骑行', '户外运动', '技巧训练'],
        '瑜伽': ['瑜伽', '放松', '柔韧性'],
        '健身': ['健身', '力量训练', '塑形']
      };
      
      const difficulties: Record<string, string> = {
        '跑步': '初级',
        '骑行': '中级', 
        '瑜伽': '初级',
        '健身': '中级'
      };
      
      const equipments: Record<string, string[]> = {
        '跑步': ['运动鞋', '运动服'],
        '骑行': ['自行车', '头盔'],
        '瑜伽': ['瑜伽垫'],
        '健身': ['哑铃', '瑜伽垫']
      };
      
      videoData.value.description = descriptions[type] || '这是一套专业的运动训练视频，适合各个水平的运动爱好者。';
      videoData.value.tags = tags[type] || ['运动', '训练'];
      videoData.value.difficulty = difficulties[type] || '中级';
      videoData.value.equipment = equipments[type] || ['运动装备'];
      
      // 获取相关推荐
      await getRelatedVideos(videoData.value.type || '', String(videoData.value.id));
      
      console.log('视频数据加载成功:', video);
    } else {
      console.error('未找到对应ID的视频:', id);
      videoData.value = null;
    }
  } catch (error) {
    console.error('获取视频数据失败:', error);
    videoData.value = null;
  } finally {
    loading.value = false;
  }
};

// 提交评论
const submitComment = async () => {
  if (!newComment.value.trim() || !videoData.value) return;
  
  // 使用指定用户信息
  const comment = {
    user: '王紫冰',
    avatar: '/public/1.jpg',
    content: newComment.value,
    date: new Date().toISOString().slice(0, 10)
  };
  
  try {
    const res = await axios.post(`http://localhost:3000/api/video-list/${videoData.value.id}/comment`, comment);
    videoData.value.comments = res.data;
    newComment.value = "";
  } catch (error) {
    console.error('评论失败:', error);
  }
};

// 评论点赞/取消点赞
const toggleCommentLike = async (commentIndex: number) => {
  if (!videoData.value || !videoData.value.comments) return;
  
  const comment = videoData.value.comments[commentIndex];
  if (!comment) return;
  
  try {
    const res = await axios.patch(`http://localhost:3000/api/video-list/${videoData.value.id}/comment/${commentIndex}/like`);
    if (videoData.value.comments && videoData.value.comments[commentIndex]) {
      videoData.value.comments[commentIndex] = res.data;
    }
  } catch (error) {
    console.error('点赞操作失败:', error);
  }
};

// 收藏/取消收藏功能（gz字段）
const toggleLike = async () => {
  if (!videoData.value) return;
  try {
    const res = await axios.patch(`http://localhost:3000/api/video-list/${videoData.value.id}/like`);
    videoData.value.gz = res.data.gz;
  } catch (error) {
    console.error('收藏操作失败:', error);
  }
};

// 分享功能 - 在模板中使用
const toggleShare = () => {
  showShare.value = !showShare.value;
};

// 复制链接
const copyLink = () => {
  navigator.clipboard.writeText(window.location.href);
  showShare.value = false;
};

// 跳转到相关视频
const goToRelatedVideo = (id: number | string) => {
  router.push({ name: 'LLQxq', params: { id: String(id) } });
};

// AI聊天相关函数
const toggleAIChat = () => {
  console.log('toggleAIChat被调用，当前状态:', showAIChat.value);
  showAIChat.value = !showAIChat.value;
  console.log('切换后状态:', showAIChat.value);
  
  if (showAIChat.value && chatMessages.value.length === 0) {
    // 添加欢迎消息
    chatMessages.value.push({
      id: '1',
      content: '你好，我是健身助手，有什么可以帮你？',
      isUser: false,
      timestamp: new Date()
    });
    console.log('添加欢迎消息');
  }
  
  // 滚动到底部
  nextTick(() => {
    if (chatContainer.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
    }
  });
};

const sendMessage = async () => {
  if (!currentMessage.value.trim() || isLoading.value) return;
  
  const userMessage: ChatMessage = {
    id: Date.now().toString(),
    content: currentMessage.value,
    isUser: true,
    timestamp: new Date()
  };
  
  chatMessages.value.push(userMessage);
  const messageToSend = currentMessage.value;
  currentMessage.value = "";
  isLoading.value = true;
  
  // 滚动到底部
  nextTick(() => {
    if (chatContainer.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
    }
  });
  
  try {
    // 调用 Coze API
    const response = await fetch('https://api.coze.cn/open_api/v2/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer pat_yutogVv2KjpjRC9IOhyEoTRfnKlkcH7m2OO9f5t0eFa6W2payP7MublTyp7pQf3N',
      },
      body: JSON.stringify({
        bot_id: '7517883645723017251', // Coze机器人ID
        user: 'fitness_user', // 用户ID
        query: messageToSend, // 用户输入内容
        stream: false // 不使用流式
      })
    });
    
    const data = await response.json();
    
    // 解析 Coze 返回的内容
    let aiReply = data?.messages?.[0]?.content || 'AI未能理解你的问题';
    
    // 尝试解析 content 是否为JSON对象
    try {
      const parsed = JSON.parse(aiReply);
      // 如果解析出来有 result/reply/text 字段，优先显示
      aiReply = parsed.result || parsed.reply || parsed.text || aiReply;
    } catch (e) {
      // 不是JSON则直接显示
    }
    
    const aiMessage: ChatMessage = {
      id: (Date.now() + 1).toString(),
      content: aiReply,
      isUser: false,
      timestamp: new Date()
    };
    
    chatMessages.value.push(aiMessage);
  } catch (err) {
    console.error('Coze API调用失败:', err);
    
    // 网络或API异常时的兜底回复
    const fallbackReplies = [
      '您好！我是您的健身AI助手。我可以帮助您制定健身计划、解答运动问题、提供营养建议等。请告诉我您需要什么帮助？',
      '关于健身，我建议您：1. 制定合理的训练计划 2. 注意正确的动作姿势 3. 保持充足的休息 4. 均衡的饮食搭配。您想了解哪个方面？',
      '运动时要注意安全，建议您：1. 充分热身 2. 循序渐进 3. 听从身体信号 4. 保持水分补充。有什么具体的运动问题吗？',
      '健身是一个长期的过程，建议您：1. 设定明确目标 2. 保持运动习惯 3. 记录训练进度 4. 适时调整计划。需要我帮您制定计划吗？',
      '营养搭配对健身很重要，建议：1. 充足的蛋白质 2. 适量的碳水化合物 3. 健康的脂肪 4. 丰富的维生素。您想了解营养搭配吗？',
      '有氧运动建议：1. 每周3-5次 2. 每次30-60分钟 3. 心率控制在最大心率的60-80% 4. 选择喜欢的运动方式。您喜欢什么有氧运动？',
      '力量训练要点：1. 循序渐进增加重量 2. 注意动作标准 3. 充分休息恢复 4. 全身均衡发展。需要具体的训练计划吗？',
      '拉伸很重要：1. 运动前后都要拉伸 2. 每个动作保持15-30秒 3. 不要过度拉伸 4. 注意呼吸节奏。您知道正确的拉伸方法吗？'
    ];
    
    const randomReply = fallbackReplies[Math.floor(Math.random() * fallbackReplies.length)];
    
    const fallbackMessage: ChatMessage = {
      id: (Date.now() + 1).toString(),
      content: 'AI接口请求失败，请稍后重试。\n\n' + randomReply,
      isUser: false,
      timestamp: new Date()
    };
    
    chatMessages.value.push(fallbackMessage);
  }
  
  isLoading.value = false;
  // 滚动到底部
  nextTick(() => {
    if (chatContainer.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
    }
  });
};

const closeAIChat = () => {
  showAIChat.value = false;
};

// AI图标点击处理
const handleAIClick = () => {
  console.log('AI图标被点击');
  toggleAIChat();
};

onMounted(() => {
  getVideoDataById();
});

// 监听路由参数变化，自动刷新详情和相关推荐
watch(() => route.params.id, (newId, oldId) => {
  if (newId !== oldId) {
    getVideoDataById();
  }
});

</script>

<template>
    <div class="video-detail">
        <div class="fixed-navbar" >
            <van-nav-bar
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            >
                <template #title>
                    <div v-if="videoData" class="nav-user-info">
                        <img v-if="videoData.tx" :src="videoData.tx" :alt="videoData.user" class="nav-user-avatar" />
                        <span class="nav-username">{{ videoData.user || '未知用户' }}</span>
                    </div>
                </template>
                <template #right>
                    <el-button v-if="videoData" class="nav-like-btn" type="warning" size="small" @click="toggleLike">
                        {{ videoData.gz === '1' ? '取消收藏' : '收藏' }}
                    </el-button>

                 </template>
            </van-nav-bar>
        </div>
        
        <div v-if="loading" class="loading">
            <van-loading type="spinner" color="#409eff" />
            <p>加载中...</p>
        </div>
        
        <div v-else-if="videoData" class="content">
            <!-- 视频播放器 -->
            <div class="video-container">
                <video 
                    :src="videoData.videoUrl || videoData.img" 
                    :poster="videoData.img"
                    controls
                    class="video-player"
                    preload="metadata"
                >
                    您的浏览器不支持视频播放
                </video>
            </div>

            <!-- 视频信息 -->
            <div class="video-info">
                <h2 class="video-title">{{ videoData.name }}</h2>
                <div class="video-meta-row">
                    <span class="video-type">{{ videoData.type }}</span>
                    <span class="video-date">{{ videoData.time || '--' }}</span>
                </div>
                
                <!-- 视频描述 -->
                <div class="video-description">
                    <p>{{ videoData.description || '暂无描述' }}</p>
                </div>

                <!-- 标签 -->
                <div class="video-tags" v-if="videoData.tags && videoData.tags.length">
                    <span v-for="tag in videoData.tags" :key="tag" class="tag">{{ tag }}</span>
                </div>

                <!-- 视频元数据 -->
                <div class="video-meta">
                    <div class="meta-item">
                        <van-icon name="clock-o" class="meta-icon" />
                        <div class="meta-content">
                            <div class="meta-value">{{ videoData.sj || '--' }}</div>
                            <div class="meta-label">分钟</div>
                        </div>
                    </div>
                    <div class="meta-item">
                        <van-icon name="fire-o" class="meta-icon" />
                        <div class="meta-content">
                            <div class="meta-value">{{ videoData.qk || '--' }}</div>
                            <div class="meta-label">千卡</div>
                        </div>
                    </div>
                    <div class="meta-item">
                        <van-icon name="star-o" class="meta-icon" />
                        <div class="meta-content">
                            <div class="meta-value">{{ videoData.difficulty || '--' }}</div>
                            <div class="meta-label">难度</div>
                        </div>
                    </div>
                </div>

                <!-- 所需器材 -->
                <div class="equipment-section" v-if="videoData.equipment && videoData.equipment.length">
                    <h4 class="section-subtitle">所需器材</h4>
                    <div class="equipment-list">
                        <span v-for="item in videoData.equipment" :key="item" class="equipment-item">
                            <van-icon name="bag-o" />
                            {{ item }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- 评论区 -->
            <div class="comment-section">
                <div class="comment-section-title">
                    <van-icon name="chat-o" class="comment-icon" />
                    <span>评论区 ({{ videoData.comments ? videoData.comments.length : 0 }})</span>
                </div>
                <div class="comment-list-wrapper">
                    <div v-if="videoData.comments && videoData.comments.length > 0">
                        <div v-for="(comment, idx) in videoData.comments" :key="idx" class="comment-item">
                            <img :src="comment.avatar" class="comment-avatar" />
                            <div class="comment-bubble">
                                <div class="comment-header">
                                    <span class="comment-user">{{ comment.user }}</span>
                                    <span class="comment-date">{{ comment.date }}</span>
                                </div>
                                <div class="comment-text">{{ comment.content }}</div>
                                <div class="comment-actions">
                                    <div class="like-btn" @click="toggleCommentLike(idx)">
                                        <van-icon 
                                            :name="comment.isLiked ? 'good-job' : 'good-job-o'" 
                                            :class="{ 'liked': comment.isLiked }"
                                        />
                                        <span class="like-count">{{ comment.likes }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="no-comment">
                        <van-icon name="chat-o" />
                        <p>暂无评论，快来抢沙发吧！</p>
                    </div>
                </div>
            </div>

            <!-- 相关推荐 -->
            <div class="related-section">
                <h3 class="section-title">相关推荐</h3>
                <div class="related-videos">
                    <div 
                        v-for="video in relatedVideos" 
                        :key="video.id" 
                        class="related-video-item"
                        @click="goToRelatedVideo(video.id)"
                    >
                        <img :src="video.img" class="related-video-img" />
                        <div class="related-video-info">
                            <h4 class="related-video-title">{{ video.name }}</h4>
                            <p class="related-video-user">{{ video.user }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div v-else class="error">
            <van-icon name="warning-o" size="48" color="#ff4757" />
            <p>数据加载失败</p>
        </div>

        <!-- 分享弹窗 -->
        <van-popup v-model="showShare" position="bottom" round>
            <div class="share-popup">
                <h3>分享到</h3>
                <div class="share-options">
                    <div class="share-option" @click="copyLink">
                        <van-icon name="link-o" />
                        <span>复制链接</span>
                    </div>
                    <div class="share-option">
                        <van-icon name="wechat" />
                        <span>微信</span>
                    </div>
                    <div class="share-option">
                        <van-icon name="qq" />
                        <span>QQ</span>
                    </div>
                </div>
                <div class="share-cancel" @click="showShare = false">取消</div>
            </div>
        </van-popup>

        <!-- 评论输入框 -->
        <div class="comment-input-fixed">
            <input
                v-model="newComment"
                class="comment-input"
                type="text"
                maxlength="100"
                placeholder="说点什么吧…"
                @keyup.enter="submitComment"
            />
            <button class="comment-btn" @click="submitComment">发送</button>
        </div>
        
        <!-- 固定的AI图标 -->
        <div 
          class="ai-icon-fixed"
          @click="handleAIClick"
        >
          <van-icon name="chat-o" class="ai-icon" />
          <span class="ai-text">AI助手</span>
        </div>
        
        <!-- AI聊天弹窗 -->
        <transition name="slide-up">
          <div v-if="showAIChat" class="ai-chat-overlay" @click="closeAIChat">
            <div class="ai-chat-container" @click.stop>
              <div class="ai-chat-header">
                <div class="ai-chat-title">
                  <van-icon name="chat-o" class="ai-title-icon" />
                  <span>AI健身助手</span>
                </div>
                <div class="ai-chat-actions">
                  <van-icon name="cross" class="ai-close-icon" @click="closeAIChat" />
                </div>
              </div>
              
              <div class="ai-chat-messages" ref="chatContainer">
                <div
                  v-for="message in chatMessages"
                  :key="message.id"
                  :class="['message', message.isUser ? 'user-message' : 'ai-message']"
                >
                  <div class="message-content">
                    {{ message.content }}
                  </div>
                  <div class="message-time">
                    {{ message.timestamp.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) }}
                  </div>
                </div>
                
                <!-- 加载状态 -->
                <div v-if="isLoading" class="message ai-message">
                  <div class="message-content">
                    <div class="loading-dots">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="ai-chat-input">
                <el-input
                  v-model="currentMessage"
                  placeholder="请输入你的问题..."
                  @keyup.enter="sendMessage"
                  :disabled="isLoading"
                  class="chat-input"
                />
                <el-button
                  type="primary"
                  @click="sendMessage"
                  :disabled="isLoading || !currentMessage.trim()"
                  class="send-button"
                >
                  <van-icon name="send" />
                </el-button>
              </div>
            </div>
          </div>
        </transition>
    </div>
</template>
          
<style scoped>
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 999;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.video-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 64px;
  padding-top: 46px; /* 导航栏高度，视实际高度调整 */
}

.content {
  padding: 20px;
}

.video-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #000;
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  object-fit: contain;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.user-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.username {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.follow-btn {
  background-color: #ff6b6b;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
}

.nav-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-username {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* .nav-follow-btn { ... } 整段样式删除 */

.video-info h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.video-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.3;
}

.video-meta-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.video-type {
  background-color: #409eff;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.video-description {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 15px;
  padding: 15px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  background-color: #e6f7ff;
  color: #409eff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #409eff;
}

.equipment-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.section-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.equipment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.equipment-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #f0f9ff;
  color: #409eff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #409eff;
}

.comment-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #666;
}

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #ff4757;
}

.video-date {
  color: #888;
  font-size: 14px;
  margin: 8px 0 12px 0;
}

.video-meta {
  display: flex;
  gap: 40px;
  margin: 16px 0 0 0;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-icon {
  font-size: 18px;
  color: #409eff;
  margin-right: 8px;
}

.meta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.meta-value {
  font-size: 22px;
  font-weight: bold;
  color: #222;
}
.meta-label {
  font-size: 14px;
  color: #888;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}
.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}
.comment-content {
  flex: 1;
}
.comment-user {
  font-weight: bold;
  font-size: 15px;
  color: #333;
}
.comment-text {
  margin: 2px 0 2px 0;
  font-size: 14px;
  color: #444;
}
.comment-date {
  font-size: 12px;
  color: #aaa;
}
.no-comment {
  color: #aaa;
  font-size: 14px;
  margin-top: 10px;
}

.comment-input-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 12px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  z-index: 100;
  gap: 10px;
}

.comment-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.comment-btn {
  background-color: #a0cfff;
  color: #fff;
  padding: 8px 24px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(80,180,255,0.10);
  transition: background 0.2s;
}
.comment-btn:hover {
  background-color: #409eff;
}
.comment-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #f0f9ff;
  padding-bottom: 8px;
}
.comment-icon {
  font-size: 20px;
}
.comment-list-wrapper {
  margin-top: 8px;
}
.comment-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.comment-item:hover .comment-bubble {
  box-shadow: 0 6px 24px rgba(80,180,255,0.10);
  transform: translateY(-2px) scale(1.02);
}
.comment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(80,180,255,0.10);
  border: 2px solid #f0f9ff;
}
.comment-bubble {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-radius: 14px;
  padding: 12px 18px 10px 16px;
  box-shadow: 0 2px 12px rgba(80,180,255,0.06);
  min-width: 0;
  flex: 1;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.comment-user {
  font-weight: bold;
  font-size: 15px;
  color: #409eff;
  letter-spacing: 0.5px;
}
.comment-date {
  font-size: 12px;
  color: #8cc8ff;
  margin-left: 16px;
}
.comment-text {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  word-break: break-all;
}
.no-comment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8cc8ff;
  font-size: 15px;
  margin: 32px 0 0 0;
  text-align: center;
  letter-spacing: 1px;
}

.no-comment .van-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.no-comment p {
  margin: 0;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(64, 158, 255, 0.1);
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(64, 158, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.like-btn:hover {
  background: rgba(64, 158, 255, 0.1);
  transform: translateY(-1px);
}

.like-btn .van-icon {
  font-size: 16px;
  color: #8cc8ff;
  transition: all 0.3s ease;
}

.like-btn .van-icon.liked {
  color: #ff4757;
  transform: scale(1.1);
}

.like-count {
  font-size: 13px;
  color: #8cc8ff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.like-btn:hover .like-count {
  color: #409eff;
}

.like-btn .van-icon.liked + .like-count {
  color: #ff4757;
}

.nav-like-btn {
  margin-left: 8px;
  font-weight: 600;
}

/* New styles for related videos and share popup */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icon {
  font-size: 24px;
  color: #666;
  cursor: pointer;
}

.share-popup {
  padding: 20px;
  text-align: center;
}

.share-popup h3 {
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

.share-options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.share-option .van-icon {
  font-size: 36px;
  color: #409eff;
  margin-bottom: 8px;
}

.share-option span {
  font-size: 14px;
  color: #666;
}

.share-cancel {
  background-color: #f0f0f0;
  padding: 10px 20px;
  border-radius: 8px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.share-cancel:hover {
  background-color: #e0e0e0;
}

.related-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding-left: 10px;
}

.related-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.related-video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.related-video-item:hover {
  transform: translateY(-5px);
}

.related-video-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.related-video-info {
  width: 100%;
  text-align: center;
}

.related-video-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.related-video-user {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.related-video-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #888;
}

.related-video-likes .van-icon {
  font-size: 14px;
}

/* AI图标样式 */
.ai-icon-fixed {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.ai-icon-fixed:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
}

.ai-icon {
  font-size: 24px;
  color: white;
  margin-bottom: 2px;
}

.ai-text {
  font-size: 10px;
  color: white;
  font-weight: 600;
  text-align: center;
  line-height: 1;
}

@media (max-width: 700px) {
  .ai-icon-fixed {
    bottom: 120px;
    right: 15px;
    width: 50px;
    height: 50px;
  }
  
  .ai-icon {
    font-size: 20px;
  }
  
  .ai-text {
    font-size: 9px;
  }
}

/* AI聊天弹窗样式 */
.ai-chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.ai-chat-container {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  height: 80%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.ai-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.ai-chat-title {
  display: flex;
  align-items: center;
}

.ai-title-icon {
  margin-right: 8px;
  font-size: 24px;
}

.ai-chat-actions {
  display: flex;
  gap: 10px;
}

.ai-close-icon {
  font-size: 24px;
  color: white;
  cursor: pointer;
}

.ai-chat-messages {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8f9fa;
}

.message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 15px;
  position: relative;
}

.user-message {
  align-self: flex-end;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.ai-message {
  align-self: flex-start;
  background: #e9ecef;
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.message-content {
  word-break: break-word;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.message-time {
  font-size: 10px;
  color: #95a5a6;
  margin-top: 5px;
  align-self: flex-end;
}

.loading-dots {
  display: flex;
  gap: 5px;
}

.loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #667eea;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(-10px);
    opacity: 0.6;
  }
  40% {
    transform: translateY(0);
    opacity: 1;
  }
}

.ai-chat-input {
  display: flex;
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  border-radius: 0 0 20px 20px;
  gap: 10px;
}

.chat-input {
  flex-grow: 1;
  height: 44px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0 15px;
  font-size: 14px;
  color: #333;
  background: transparent;
  box-shadow: none;
}

.send-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: background 0.3s ease;
}

.send-button:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.send-button:active {
  transform: scale(0.95);
}

/* 过渡动画 */
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s ease;
}
.slide-up-enter-from {
  transform: translateY(100%);
  opacity: 0;
}
.slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
